<template>
    <view class="type-area cus-page">
        <view class="com-m-t-20 com-m-b-20 card">
            <u--form
				labelPosition="left"
				:model="form"
				:rules="rules"
				ref="form">

                <u-form-item label="姓名" labelWidth="100rpx" prop="name" borderBottom>
                    <u--input v-model="form.name" placeholder="请输入收货人姓名" border="none" />
                </u-form-item>

                <u-form-item label="手机号码" labelWidth="150rpx" prop="phone" borderBottom>
                    <u--input v-model="form.phone" placeholder="请输入手机号码" border="none" />
                </u-form-item>

                <u-form-item label="所在国家/地区" labelWidth="220rpx" prop="region" borderBottom>
                    <pickerAddress :regionIndex="form.regionIndex" @change="change">
                        <text v-if="form.region">{{form.region}}</text>
                        <text v-else style="color:rgb(192, 196, 204)">请选择所在国家/地区</text>
                    </pickerAddress>
                </u-form-item>

                <view class="address">
                    <u-form-item label="详细地址" labelWidth="150rpx" prop="address" borderBottom>
                        <u--textarea v-model="form.address" placeholder="请输入详细地址" height="100rpx" confirmType="done"></u--textarea>
                    </u-form-item>
                </view>

                <u-gap height="10rpx" bgColor="transparent"></u-gap>
                <view class="switch">
                    <u-form-item label="默认地址" labelWidth="150rpx" :borderBottom="false">
                        <u-switch v-model="form.default"></u-switch>
                    </u-form-item>
                </view>
            </u--form>
        </view>
        <ct-bottom-button :buttons="buttons"/>
    </view>
</template>


<script>
import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
export default {
    name:'addEditAddress',
    components: {
        pickerAddress
    },
    props:{},

    data () {
        return {
            id: null,
			form: {
                name: '',
                phone: '',
                region: '',
                regionIndex: [0,0,0],
                address: '',
                default: false,
			},
			rules: {
				name: { required: true, message: '请填写姓名', trigger: ['blur', 'change'] },
                phone: [
                    { required: true,  message: '请输入手机号', trigger: ['change','blur'] },
                    {
                        validator: (rule, value, callback) => {
                            return uni.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        trigger: ['change','blur'],
                    }
	            ],
                address: { required: true, message: '请输入详细地址', trigger: ['blur', 'change'] },
			},
            buttons: ["保存"],
        }
    },

    computed: {},
    watch: {},

    onLoad(option){
        if(option.id){
            this.id = option.id;
            uni.setNavigationBarTitle({ title: '编辑地址' });
            this.buttons =  ["删除","保存"];
        }else{
            uni.setNavigationBarTitle({ title: '新增地址' });
        }
    },
    mounted() {},

    methods: {
        // 选择省市县
        change(data) {
            this.form.region = data.data.join('')
            this.form.regionIndex = data.index;
        }
    },
}
</script>


<style scoped lang='scss'>
    .card{
        background: #fff;
        border-radius: 24rpx;
        padding: 10rpx 32rpx 16rpx;
        /deep/.u-form-item__body{
            padding: 24rpx 0 !important;
        }
        /deep/.u-form-item__body__left__content__label{
            font-weight: bold;
            font-size: 28rpx !important;
        }
        /deep/.uni-input-placeholder{
            font-size: 28rpx !important;
        }
        /deep/.address{
            .u-form-item__body{
                align-items: flex-start !important;
            }
            .u-textarea{
                border: none !important;
                padding: 0 !important;
            }
        }
        /deep/.switch{
            .u-form-item__body{
                justify-content: space-between !important;
                .u-form-item__body__right{
                    flex: 0 !important;
                }
            }
        }
    }
</style>